<template>
    <div class="column" style="padding: 50px; gap: 20px">
        <el-radio-group v-model="conf.active" @change="changeTheme">
            <el-radio label="light" size="large">明亮</el-radio>
            <el-radio label="dark" size="large">阴暗</el-radio>
        </el-radio-group>

        <div style="color: var(--c-text-primary)">
            {{ t('label') }}
            -----
            {{ conf.label }}
            -----
            {{ t('item.test') }}
            -----
        </div>

        <div class="row items-center">
            <img :src="`/#{static}/theme/${Theme.use}/指针.svg`" />
            <sicon type="user" color="var(--c-primary)" size="30" />
            <sicon type="android-fill" color="var(--c-primary)" size="30" />
        </div>

        <div style="width: 700px; height: 300px">
            <cChart :data="conf.line" :color="Theme.chart.getColor1" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import Theme from '~/utils/Theme'
import cChart from '~/components/chart/line.vue'
import I18n from '~/utils/I18n/I18n'

const t = I18n.get

const conf = reactive({
    active: 'light',
    label: computed(() => t('label')),
    line: {
        xAxisData: ['1', '2', '3', '4', '5'],
        yAxisData: [[2, 2, 6, 5, 4]]
    }
})

const changeTheme = () => {
    Theme.change(conf.active as any)
    I18n.setLang(conf.active)
}
</script>
